<template>
  <div class="flex h-full">
    <div class="w-64">
      <ApiGroup @select="handleGroupSelect" />
    </div>
    
    <div class="flex-1 h-full border-l flex flex-col">
      <NTabs
        v-model:value="activeTab"
        type="card"
        closable
        addable
        @close="handleCloseTab"
        @add="handleAddTab"
      >
        <NTabPane
          v-for="tab in tabs"
          :key="tab.key"
          :name="tab.key"
          :tab="tab.name"
        >
          <ApiTest 
            v-if="tab.groupId" 
            :group-id="tab.groupId"
            :key="tab.key" 
          />
          <div v-else class="h-full flex items-center justify-center text-gray-400">
            请选择一个 API 分组
          </div>
        </NTabPane>
      </NTabs>

      <div v-if="tabs.length === 0" class="flex-1 flex items-center justify-center text-gray-400">
        请选择或新建一个 API 进行测试
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { NTabs, NTabPane } from 'naive-ui'
import ApiGroup from '../components/ApiGroup.vue'
import ApiTest from '../components/ApiTest.vue'

interface Tab {
  name: string
  key: string
  groupId?: number
}

const activeTab = ref<string>('')
const tabs = ref<Tab[]>([])

// 处理分组选择
const handleGroupSelect = (groupId: number, groupName: string) => {
  // 检查是否已存在该分组的标签页
  const existingTab = tabs.value.find(tab => tab.groupId === groupId)
  
  if (existingTab) {
    // 如果已存在，则切换到该标签页
    activeTab.value = existingTab.key
    return
  }
  
  // 如果不存在，则创建新标签页
  const newTab: Tab = {
    name: groupName, // 使用集合名称作为标签页名称
    key: `tab-${groupId}`, // 使用 groupId 作为 key 的一部分，确保唯一性
    groupId
  }
  
  tabs.value.push(newTab)
  activeTab.value = newTab.key
}

// 关闭标签页
const handleCloseTab = (tabKey: string) => {
  const index = tabs.value.findIndex(tab => tab.key === tabKey)
  if (index !== -1) {
    tabs.value.splice(index, 1)
    
    // 如果关闭的是当前激活的标签页，则切换到最后一个标签页
    if (activeTab.value === tabKey) {
      activeTab.value = tabs.value[tabs.value.length - 1]?.key || ''
    }
  }
}

// 新建空白标签页
const handleAddTab = () => {
  const newTab: Tab = {
    name: `新建测试 ${tabs.value.length + 1}`,
    key: `tab-${Date.now()}`
  }
  tabs.value.push(newTab)
  activeTab.value = newTab.key
}
</script>